{#include file="top.php"#}
<link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />
<script src="/js/jquery.Jcrop.js"></script>
<div class="body">
    <div class="main">
        <div class="reg_step_box"></div>

        <div class="basic_info b_box">
            <div class="hd">
                <h2 class="hd_title">基本資料</h2>
            </div>
            <form id="register_form" enctype="multipart/form-data" action="member.php?action=reg" method="POST">
                <div class="bd">
                    <div class="basic_info_box">
                        <p class="c_title">
                            註冊成為普通會員
                        </p>
                        <p class="name_p">
                            會員名稱
                        </p>
                        <input type="text" class="info_ipt_text" value="" id="username" name="reg_p[username]" />
                        <p class="tip"  style="display:none;" id="username_tip" >
                            <em class="hack"></em>
                            <a class="close" > </a>
                            <span id="username_tip_text">{#$ERR_USERNAME#}</span>
                        </p>
                        <p class="name_p">
                            密碼
                        </p>
                        <input type="password" class="info_ipt_text" id="password" name="reg_p[password]" value=""/>
                        <p class="tip" style="display:none;"  id="password_tip">
                            <em class="hack"></em>
                            <a class="close"> <span></span> </a>
                            <span id="password_tip_text">{#$ERR_PWD#}</span>
                        </p>
                        <p class="name_p">
                            確認密碼
                        </p>
                        <input type="password" class="info_ipt_text" id="cpassword" name="cpassword"  value=""/>
                        <p class="tip" style="display:none;"  id="cpassword_tip">
                            <em class="hack"></em>
                            <a class="close"> <span></span> </a>
                            <span id="cpassword_tip_text">{#$ERR_CPWD#}</span>
                        </p>

                        <p class="name_p">
                            電郵地址
                        </p>
                        <input type="text" class="info_ipt_text" id="email" name="reg_p[email]" value=""/>
                        <p class="tip" style="display:none;"  id="email_tip">
                            <em class="hack"></em>
                            <a class="close"> <span></span> </a>
                            <span id="email_tip_text">{#$ERR_EMAIL#}</span>
                        </p>
                        <p class="name_p">
                            英文名字
                        </p>
                        <input type="text" class="info_ipt_text" value="" id="ename" name="reg_p[ename]" />
                        <p class="tip"  style="display:none;" id="ename_tip" >
                            <em class="hack"></em>
                            <a class="close" > </a>
                            <span id="ename_tip_text">請輸入英文名字</span>
                        </p>
                        <p class="name_p">
                            香港身份証號碼
                        </p>
                        <input type="text" class="info_ipt_text" id="idcard" maxlength="4" name="reg_p[idcard]"  value=""/>
                        <p class="tip" style="display:none;"  id="idcard_tip">
                            <em class="hack"></em>
                            <a class="close"> <span></span> </a>
                            <span id="idcard_tip_text">{#php#}echo ERR_IDCAR;{#/php#}</span>
                        </p>
                        <p class="name_p">
                            性別
                        </p>
                        <span class="option"><input type="radio" value="1" name="reg_p[sex]">男.</span>
                        <span class="option"><input type="radio" value="2" name="reg_p[sex]"  checked="checked">女</span>
                        <p class="name_p">
                            手提電話號碼
                        </p>
                        <input type="text" class="info_ipt_text" maxlength="11" id="phone" name="reg_p[phone]"  value=""/>
                        <p class="tip" style="display:none;"  id="phone_tip">
                            <em class="hack"></em>
                            <a class="close"> <span></span> </a>
                            <span id="phone_tip_text">{#php#}echo ERR_PHONE;{#/php#}</span>
                        </p>
                        <p class="name_p">
                            出生日期
                        </p>
                        <input type="text" class="info_ipt_text" id="birthday" name="reg_p[birthday]" value=""/>

                        <p class="tip" style="display:none;"  id="birthday_tip">
                            <em class="hack"></em>
                            <a class="close"> <span></span> </a>
                            <span id="birthday_tip_text">{#php#}echo ERR_BIRTH;{#/php#}</span>
                        </p>
                        <p class="name_p">
                            推薦朋友
                        </p>
                        <input type="text" class="info_ipt_text" id="friend" name="friend" value="{#$friend#}"/>

                        <div class="filebox">
                            <div class="img_box_r" >
                                <img src="data/p84x84.jpg" width=84 height="84" id="preview_pic" >
                            </div>
                            <a class="btn_s btn_s_upload_a" href="javascript:void(0);" onclick="show_upload_pic()"> <strong>選擇檔案</strong>
                            </a>
                            <input type="hidden" id="avatar" name="reg_p[avatar]">
                            <input type="hidden" id="x" name="x" />
                            <input type="hidden" id="y" name="y" />
                            <input type="hidden" id="w" name="w" />
                            <input type="hidden" id="h" name="h" />
                            <p class="tip" style="display:none;"  id="avatar_file_tip">
                                <em class="hack"></em>
                                <a class="close"> <span></span> </a>
                                <span id="avatar_file_tip_text">{#$HAS_INVITE_PIC#}</span>
                            </p>
                        </div>
                    </div>

                    <div class="other_login">

                        <div class="lgbox">
                            <em class="hack"></em>
                            <a href="member.php?action=login_facebook&toURL={#$toURL#}" class="fbtn"><strong>綁定facebook</strong></a><p><a href="/member.php?action=login_facebook&toURL={#$toURL#}" class="fb_link">綁定facebook</a></p>
                        </div>
                        <div>
                            <em class="hack"></em>
                            <a href="member.php?action=login_fnb&toURL={#$toURL#}" class="fabtn"><strong>以F&B登入 </strong></a><p><a href="member.php?action=login_fnb&toURL={#$toURL#}" class="fb_link">以F&B登入</a> </p>
                        </div>
                    </div>
                </div>
                <div class="ft">
                    <p>條款及細則</p>
                    <textarea class="reg_info_textarea" rows="8" cols="40" readonly>
1. 率先試用市面上最新產品或未公開發售之產品。
2. 不定期免費獲得不同類型之美容或潮流產品。
3. 優先參與 iMORE 舉辦之大型活動。
4. 如報告之內容詳細而豐富者，將給予更多產品試用機會。
5. 一經被取錄即成為體驗團之永久認証成員，並且費用全免。
                    </textarea>
                    <input type="checkbox" class="checkbox" id="agree" name="agree" value="0">  我已閱讀新傳媒集團個人<a href="/policy.html" target="_blank" style="text-decoration:underline">私隱政策</a>，並同意接受以上條款及細則。 </span>
                    <p class="tip"  id="agree_tip" style="display:none;" >
                        <em class="hack"></em><a href="#" class="ir close">close</a>
                        <span id="agree_tip_text">{#$NO_AGREE#}</span>
                    </p>
                    <p >
                        <input type="checkbox" class="checkbox" id="email_receive" name="reg_p[email_receive]" value="1"> 我願意接收itrial.hk，流行新姿與新傳媒集團的最新消息及其他宣傳資訊。</p>
                </div>

                <input type="hidden" name="issubmit" value="1" />
                <a  onclick="check_register();" class="btn_s btn_s_next" style="cursor:pointer"><strong>下一步</strong></a>
            </form>
        </div>
    </div>

    <!-- main-->
    <div class="sidebar">
        {#show_block('b2',1,'','sidebar_ad')#}
        {#show_block('b1',2,'','sidebar_function')#}
        {#show_block('b3',0,'','sidebar_search')#}
        {#show_block('b4',0,'','sidebar_workshop')#}
        {#show_block('b5',0,'','sidebar_top5 b_box')#}
    </div>
    <!-- sidebar -->

</div><!--body-->
<div class="popup popup_3" id="upload_photo" style="visibility:hidden;">
    <a class="btn_close" href="###" onclick="hide_upload_pic()"></a>
    <div class="avatar_box b_box">
        <div class="hd">
            <h2 class="hd_title">上傳頭像</h2>
        </div>
        <div class="bd">
            <div class="img_box_l">
                <img id="cropbox" src="images/400x400.jpg" alt="" width="400"  />
            </div>
            <div class="img_box_r" >
                <img id="preview" src="images/400x400.jpg" alt="" width=84 height="84"  />
            </div>
            <a class="btn_s btn_s_upload" href="###"><strong>選擇檔案</strong>
                <input type="file" class="file_upload"  id="avatar_file" >
            </a>
            <a class="btn_s btn_s_sure" href="###" onclick="hide_upload_pic()"><strong>確定</strong></a>
        </div>
    </div>
</div>
<link rel="stylesheet" href="js/ui/jquery-ui-1.8.8.custom.css">
<script src="js/ui/jquery-ui-1.8.8.custom.min.js"></script>
<script>
    // Remember to invoke within jQuery(window).load(...)
    // If you don't, Jcrop may not initialize properly
    

    // Our simple event handler, called from onChange and onSelect
    // event handlers, as per the Jcrop invocation above
    function showPreview(coords)
    {
        if (parseInt(coords.w) > 0)
        {
            var rx = 84 / coords.w;
            var ry = 84 / coords.h;

            jQuery('#preview').css({
                width: Math.round(rx * 400) + 'px',
                height: Math.round(ry * 400) + 'px',
                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                marginTop: '-' + Math.round(ry * coords.y) + 'px'
            });
            jQuery('#preview_pic').css({
                width: Math.round(rx * 400) + 'px',
                height: Math.round(ry * 400) + 'px',
                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                marginTop: '-' + Math.round(ry * coords.y) + 'px'
            });
        }
    }
    function updateCoords(c)
    {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };
                        
    $.ajaxSetup({
        async : false
    });
    
    function show_upload_pic(){
        $('#upload_photo').attr("style","visibility:visible;");
    }
    function hide_upload_pic(){
        $('#upload_photo').attr("style","visibility:hidden;");
    }
    function c_pic(){
        $('#cropbox').attr('src',"images/loading.gif");
    }

    (function($){
        $.fn.imgIframeUpload = function(settings) {

            var form;
            var iframe;
            var	self = this;
            var	selfId = self.attr('id');
            var	opts = {
                action: "{#$selfurl#}?action=ajax_uploadAvatar",
                callback: null
            };
            $.extend(opts, settings);

            form = $('<form method="post" action="' + opts.action + '" enctype="multipart/form-data" target="iframe-upload-' + selfId + '" style="display:none;"><input type="hidden" name="old_temp" /><input type="hidden" name="callback_script" value="' + (opts.callback ? ('parent.' + opts.callback + '($res);') : '') + '" /></form>');
            iframe = $('<iframe name="iframe-upload-' + selfId + '" frameborder="0" style="display:none;" src="about:blank"></iframe>');
            $('body').append(form).append(iframe);

            function fileChange(obj){
                obj.change(function(){
                    var fileInputClone = $(this).clone().val('').hide();
                    $(this).after(fileInputClone).attr('name', 'temp[]').removeAttr('id').appendTo(form);
                    fileInputClone.css('display', 'inline');
                    fileChange(fileInputClone);
                    form.submit();
                    $(this).remove();
                });
            }

            fileChange(self);

        }
    })(jQuery);

    function upAvatarCallback(res){
        if(res){
            if(res[0].code == 1){
                $('#avatar').val(res[0].src);
                $('#cropbox').attr('src',res[0].thumb);
                $('#preview').attr('src',res[0].thumb);
                $('#preview_pic').attr('src',res[0].thumb);
                
                $(".jcrop-holder").find("img").attr('src',res[0].thumb);
                
                jQuery('#cropbox').Jcrop({                    
                    onSelect: updateCoords,
                    onChange: showPreview,				
                    aspectRatio: 1
                });
                check_register_avatar();
            }else{
                $("#avatar_file_tip").addClass("tip").show();
                $("#avatar_file_tip_text").html(res[0].msg);
            }
        }
        $(window).focus();
    }
    var usename_ok,password_ok,cpassword_ok,salutation_ok,email_ok,phone_ok,idcard_ok,birthday_ok,captcha_ok;
    $(document).ready(function(){

        $('#avatar_file').imgIframeUpload({
            callback: 'upAvatarCallback'
        });

        $("#birthday").datepicker({
            changeMonth: true,
            changeYear: true,
            defaultDate: new Date(1990, 1 - 1, 1),
            dateFormat:'yy-mm-dd',
            minDate:new Date(1900, 1 - 1, 1),
            yearRange: '1900:2010'
            //showOn: "button",
            //buttonImage: "js/ui/images/calendar.gif",
            //buttonImageOnly: true
        });

        $('#username').focus();
		
        // change by hong
        $('#username').change(check_register_username);
        //$("#username").mousedown(check_register_username);
        $("#username").blur(check_register_username);

        //$('#password').mousedown(check_register_password);
        $('#password').blur(check_register_password);
        $('#password').change(check_register_password);


        $('#cpassword').mousedown(check_register_cpassword);
        $('#cpassword').change(check_register_cpassword);

		
        $('#email').blur(check_register_email);
        //$('#email').mousedown(check_register_email);
        $('#email').change(check_register_email);
		
        $('#ename').blur(check_register_ename);
        $('#ename').change(check_register_ename);
        $('#agree').click(check_register_agree);

        //$('#phone').mousedown(check_register_phone);
        $('#phone').blur(check_register_phone);
        $('#phone').change(check_register_phone);

        //$('#idcard').mousedown(check_register_idcard);
        $('#idcard').blur(check_register_idcard);
        $('#idcard').change(check_register_idcard);

        $('#birthday').change(check_register_birthday);


    });

    function check_register_username(){

        var rt = 0;
        var username=$('#username').val();

        if(username.match(/^[a-z][a-z0-9_]{2,14}$/i) == null){
            $("#username_tip").addClass("tip").show();
            $("#username_tip_text").text('{#$ERR_USERNAME#}');
        }else if(username.match(/^fnb_/i) != null){
            $("#username_tip").addClass("tip").show();
            $("#username_tip_text").text('{#$ERR_FNBUSERNAME#}');
        }else{
            $("#username_tip").addClass("tip").show();
            $("#username_tip_text").html('{#$CHECKING#}')
            $.get("member.php?action=ajax_checkName",{username:username},function(data){
                if(data == 1){
                    $("#username_tip").removeClass("tip").hide();
                    rt =  1;
                }else if(data == -1){
                    $("#username_tip").addClass("tip").show();
                    $("#username_tip_text").html('{#$ERR_USERNAME#}')
                }else if(data == -2){
                    $("#username_tip").addClass("tip").show();
                    $("#username_tip_text").html('{#$ERR_FNBUSERNAME#}')
                }else if(data == -3) {
                    $("#username_tip").addClass("tip").show();
                    $("#username_tip_text").html('{#$HAS_USERNAME#}')
                }

            });
        }
        return rt;
    }


    function check_register_password(){
        var rt = 0;
        var password = $('#password').val();
        if(password.match(/^.{6,16}$/i) == null){
            $("#password_tip").addClass("tip").show();
            $("#password_tip_text").html('{#$ERR_PWD#}')
        }else{
            $("#password_tip").removeClass("tip").hide();
            rt =  1;
        }
        return rt;
    }

    function check_register_avatar(){
        var rt = 0;
        if($('#avatar').val().length==0){
            $("#avatar_file_tip").addClass("tip").show();
            $("#avatar_file_tip_text").html('{#$HAS_INVITE_PIC#}')
        }else{
            $("#avatar_file_tip").removeClass("tip").hide();
            rt =  1;
        }
        return rt;
    }

    function check_register_agree(){
        var rt = 0;
        if($("#agree").attr("checked")!=true){
            $("#agree_tip").addClass("tip").show();
            $("#agree_tip_text").html('{#$NO_AGREE#}')
        }else{
            $("#agree_tip").removeClass("tip").hide();
            rt =  1;
        }
        return rt;
    }

    function check_register_cpassword(){
        var rt = 0;
        var password = $('#password').val();
        var cpassword = $('#cpassword').val();
        if(cpassword != '' && password != cpassword){
            $("#cpassword_tip").addClass("tip").show();
            $("#cpassword_tip_text").html('{#$ERR_CPWD#}')
        }else if(cpassword != '' && password == cpassword){
            $("#cpassword_tip").removeClass("tip").hide();
            rt =  1;
        }
        return rt;
    }

    function check_register_phone(){
        var rt = 0;
        var phone=$('#phone').val();
        //if(phone.length>0){
        if(phone.match(/^[0-9]{8,11}$/) == null){
            $("#phone_tip").addClass("tip").show();
            $("#phone_tip_text").html('{#$ERR_PHONE#}')
            //}else if(phone.length<8){
            //$("#phone_tip").addClass("tip").html('{#$ERR_PHONE#}').show();
        }else{

            $('#phone_tip').addClass("tip").show();
            $("#phone_tip_text").html('{#$CHECKING#}');

            $.get("member.php?action=ajax_checkPhone",{phone:phone,act:"check_phone"},function(data){
                if(data == 1){
                    $("#phone_tip").removeClass("tip").hide();
                    rt =  1;
                }else if(data == -1) {
                    //$("#phone_tip").addClass("tip").show();
                    $("#phone_tip_text").html('{#php#}echo ERR_PHONE;{#/php#}')
                }else if(data == -2) {
                    //$("#phone_tip").addClass("tip").show();
                    $("#phone_tip_text").html('{#php#}echo HAS_PHONE;{#/php#}')
                }
            });

        }
        /*}else{
                        rt =  1;
                        $("#phone_tip").removeClass("tip").hide();
                }*/
        return rt;
    }

    function check_register_birthday(){
        var birthday=$('#birthday').val();
        if(birthday == ''){
            $("#birthday_tip").addClass("tip").show();
            return 0;
        }else{
            $("#birthday_tip").removeClass("tip").hide();
            return 1;
        }
    }
    
    function check_register_ename(){
        var ename=$('#ename').val();
        if(ename == ''){
            $("#ename_tip").addClass("tip").show();
            return 0;
        }else{
            $("#ename_tip").removeClass("tip").hide();
            return 1;
        }
    }

    function check_register_idcard(){
        var idcard=$('#idcard').val();
        if(idcard.match(/^[A-Z][0-9a-z][0-9]{2}$/i) == null){
            $("#idcard_tip").addClass("tip").show();
            return 0;
        }else{
            $("#idcard_tip").removeClass("tip").hide();
            return 1;
        }
    }

    function check_register_email(){
        var rt = 0;
        var email=$.trim($('#email').val());

        if(email.length>0){
            $("#email_tip").addClass("tip").show();
            $('#email_tip_text').text('{#$CHECKING#}');
            $.get("member.php?action=ajax_checkEmail",{email:email},function(data){
                if(data == -4){
                    $("#email_tip").addClass("tip").show();
                    $("#email_tip_text").html('{#$ERR_EMAIL#}')

                }else if(data == -6) {
                    $("#email_tip").addClass("tip").show();
                    $("#email_tip_text").html('{#$HAS_EMAIL#}')

                }else if(data == 1) {
                    $("#email_tip").removeClass("tip").hide();
                    rt =  1;
                }
            });
        }else{
            $("#email_tip").addClass("tip").show();
            $("#email_tip_text").html('{#$ERR_EMAIL#}')
        }


        return rt;
    }

    function check_cssby(tipmainname){

        var obj =$("#"+tipmainname+"_tip");
        if(obj.attr('class')!='tip'){
            return 1;
        }else{
            return 0;
        }
    }

    function check_register(){
        if(check_cssby('username') != 1){
            $('#username').focus();
            //alert("{#$ERR_USERNAME#}");
            check_register_username()
            return false;
        }else if(check_cssby('password') != 1){
            $('#password').focus();
            //alert("{#$ERR_PWD#}");
            check_register_password()
            return false;
        }else if(check_cssby('cpassword') != 1){
            $('#cpassword').focus();
            //alert("{#$ERR_CPWD#}");
            check_register_cpassword()
            return false;
        }else if(check_cssby('email') != 1){
            var re = check_register_email();

            if(re==0){
                $('#email').focus();
                //alert("{#$ERR_EMAIL#}");
                return false;
            }
        }else if(check_cssby('ename') != 1){
            $('#ename').focus();
            //alert("{#php#}echo ERR_IDCAR;{#/php#}");
            check_register_ename()
            return false;
        }else if(check_cssby('phone') != 1){
            var re = check_register_phone();
            if(re==0){
                $('#phone').focus();
                //alert("{#$ERR_EMAIL#}");
                return false;
            }

        }else if(check_cssby('idcard') != 1){
            $('#idcard').focus();
            //alert("{#php#}echo ERR_IDCAR;{#/php#}");
            check_register_idcard()
            return false;
        }else if(check_cssby('birthday') != 1){
            $('#birthday').focus();
            //alert("請正確輸入出生日期!");
            return false;

        }else if($('#avatar').val().length==0){
            $('#avatar_file').focus();
            check_register_avatar();
            //alert("{#$HAS_INVITE_PIC#}");
            return false;
        }else if($("#agree").attr("checked")!=true){
            //alert("{#$NO_AGREE#}");
            check_register_agree();
            return false;
        }else{
            /*
                        var captcha=$('#captcha').val();
                        $.get("{#$selfurl#}?action=ajax_checkCaptcha",{captcha:captcha},function(data){
                                if(data=='false'){
                                        alert("驗證碼錯誤!");
                                        $('#captcha').focus();
                                        $('#captcha_img').attr("src","captcha.php?t="+Math.random());
                                        return false;
                                }else{
                                        $("#register_form").submit();
                                }
                        });
             */
            $("#register_form").submit();
        }
    }

    function formreset(){
        $('#register_form')[0].reset();
    }
</script>
{#include file="footer.php"#}